<template>
    <div class="box">
        <el-row :gutter="20" class="clearfix flex">
            <el-col :span="14">
                <div>当前配置对象：辽宁盘锦公司</div>
            </el-col>
            <el-col :span="14" :offset="14">
                <div>
                    <el-button type="primary">修改配置</el-button>
                    <el-button type="primary">查看修改日志</el-button>
                </div>
            </el-col>
        </el-row>

        <el-row  class="clearfix" >
            <el-col :span="4 " :offset="3" v-for="(item,index) in list1" :key="indexs" style="height: 100px;">
                <div class="row" >
                   <span>{{ item.title }}</span> 
                   <div  style="align-self: center;">
                   <span>{{ item.label }}:</span> 
                   <span v-for="(i,n) in item.span" :key="n">{{ i }}</span> 
                   </div>
                </div>
            </el-col>
        </el-row>

        <el-row  class="clearfix" >
            <el-col :span="4 " :offset="3" v-for="(item,index) in list2" :key="indexs" style="height: 100px;">
                <div class="row" >
                   <span>{{ item.title }}</span> 
                   <div  style="align-self: center;">
                   <span>{{ item.label }}:</span> 
                   <span v-for="(i,n) in item.span" :key="n">{{ i }}</span> 
                   </div>
                </div>
            </el-col>
        </el-row>

        <el-row  class="clearfix" >
            <el-col :span="4 " :offset="3" v-for="(item,index) in list3" :key="indexs" style="height: 100px;">
                <div class="row" >
                   <span>{{ item.title }}</span> 
                   <div style="align-self: center;">
                   <div>
                    <span>{{ item.stab }}:</span> 
                   <span>{{ item.num }}</span> 
                   </div>
                   <div style="margin-top:10px ;">
                    <span>{{ item.label }}:</span> 
                   <span v-for="(i,n) in item.span" :key="n">{{ i }}</span> 
                   </div>
                   </div>
                </div>
            </el-col>
        </el-row>

        <el-row  class="clearfix" >
            <el-col :span="4 " :offset="3" v-for="(item,index) in list4" :key="indexs" style="height: 100px;">
                <div class="row" >
                    <span>{{ item.title }}</span> 
                   <div style="align-self: center;">
                   <div v-if="item.stab">
                    <span>{{ item.stab + ':' }}</span> 
                   <span>{{ item.num }}</span> 
                   </div>
                   <div style="margin-top:10px ;">
                    <span>{{ item.label }}:</span> 
                   <span v-for="(i,n) in item.span" :key="n">{{ i }}</span> 
                   </div>
                   </div>
                </div>
            </el-col>
        </el-row>

        <el-row  class="clearfix" >
            <el-col :span="4 " :offset="3" v-for="(item,index) in list5" :key="indexs" style="height: 100px;">
                <div class="row" >
                   <span>{{ item.title }}</span> 
                   <div  style="align-self: center;">
                   <span>{{ item.label }}:</span> 
                   <span v-for="(i,n) in item.span" :key="n">{{ i }}</span> 
                   </div>
                </div>
            </el-col>
        </el-row>

    </div>
</template>
<script>
export default {
    data() {
        return {
            list1: [
                {
                    title: '账单类型',
                    label: "账单类型",
                    span: ['业务员,', '客户,', '承包区']
                },
                {
                    title: '结算对象取值',
                    label: "账单类型",
                    span: ['业务员,', '客户,', '承包区']
                }
            ],
            list2: [
                {
                    title: '目的地',
                    label: "账单类型",
                    span: ['业务员,', '客户,', '承包区']
                },
                {
                    title: '承包区结算重量',
                    label: "账单类型",
                    span: ['业务员,', '客户,', '承包区']
                }
            ],
            list3: [
                {
                    title: '业务员结算重量',
                    label: "账单类型",
                    stab: '体积重参数',
                    num:100,
                    span: ['业务员,', '客户,', '承包区']
                },
                {
                    title: '承包区结算重量',
                    label: "账单类型",
                    stab: '体积重参数',
                    num:100,
                    span: ['业务员,', '客户,', '承包区']
                }
            ],
            list4: [
                {
                    title: '体积重参数',
                    stab: '体积重参数',
                    num:100,
                    label: "账单类型",
                    span: ['业务员,', '客户,', '承包区']
                },
                {
                    title: '日周期',
                    label: "账单类型",
                    span: ['业务员,', '客户,', '承包区']
                }
            ],
            list5: [
                {
                    title: '业务时间定义',
                    label: "账单类型",
                    span: ['业务员,', '客户,', '承包区']
                },
                {
                    title: '报价生效时间',
                    label: "账单类型",
                    span: ['业务员,', '客户,', '承包区']
                }
            ],
        }
    },
}
</script>
<style lang="scss" scoped>
.box {
    padding: 20px;
}
.row{
    height: 100px;
    display: flex;
    flex-flow: column;
    justify-content: space-around;
}

.clearfix {
    padding-bottom: 20px;
    border-bottom: 1px solid #ccc;
}

.el-row {
    margin-bottom: 20px;

    &:last-child {
        margin-bottom: 0;
    }
}

.el-col {
    border-radius: 4px;
}

.flex {
    display: flex;
    justify-content: center;
    align-items: center;
}

.bg-purple-dark {
    background: #99a9bf;
}

.bg-purple {
    background: #d3dce6;
}

.bg-purple-light {
    background: #e5e9f2;
}

.grid-content {
    border-radius: 4px;
    min-height: 36px;
}

.row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
}</style>